<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/view/common/easycommon.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <title>扩展字段配置</title>
    <meta charset="utf-8">
    <style>
        table {
            font-size: 14px
        }
        a{
            text-decoration:none;
        }
    </style>
    <script>
        $(function () {
            var datagrid; //定义全局变量datagrid
            var editRow = undefined; //定义全局变量：当前编辑的行
            datagrid = $('#dataTable').datagrid({
                rownumbers: true,
                //singleSelect:true,
                pagination: true,
                pageSize: 30,
                //singleSelect:false,
                fit: true, //datagrid自适应宽度
                fitColumn: false, //列自适应宽度
                striped: true, //行背景交换
                nowap: true, //列内容多时自动折至第二行
                border: false,
                //idField: 'id', //主键
                url: "${path}/cootasktable/queryTable?fTaskHeadid=${fTaskHeadid}",
                columns: [[
                    {field: 'name', title: '列名', width: 150},
                    {field: 'typeName', title: '类型', width: 120},
                    {field: 'sort', title: '顺序', width: 120},
                    {field: 'note', title: '备注', width: 340},
                    {field: '_operate', title: '操作', width: 120, formatter: formatOper}
                ]],
                //queryParams: { action: 'query' }, //查询参数
                toolbar: [
                    {
                        text: '新增', iconCls: 'icon-add', handler: function () {
                        newPop();
                    }
                    }]
            });
        })

        function formatOper(val, row, index) {
            return '<a href="#" onclick="editPop(' + index + ')">修改</a>   ' +
                    '<a href="#" onclick="deletePop(' + index + ')">删除</a>';
        }

        function newPop() {
            $('#editForm').form('clear');
            $('#editWin').window('open');
            $('#fTaskHeadid').val('${fTaskHeadid}');
        }

        function editPop(index) {
            $('#dataTable').datagrid('selectRow', index);
            var row = $('#dataTable').datagrid('getSelected');
            if (row) {
                //console.log(row);
                $('#editForm').form('load', row);
                $('#editWin').window('open');
            } else {
                $.messager.alert("提示", "请选择要删除的行", "error");
            }
        }

        function deletePop(index) {
            $('#dataTable').datagrid('selectRow', index);
            var row = $('#dataTable').datagrid('getSelected');
            if (row.id) {
                $.messager.confirm("提示", "你确定要删除吗?", function (r) {
                    if (r) {
                        $.ajax({
                            type: "POST",
                            url: "${path}/cootasktable/deleteTable",
                            data: {id:row.id},
                            dataType: 'json',
                            //contentType: "application/json;charset=utf-8",
                            success: function (text) {
                                if (text.status == 1) {
                                    layer.msg(text.msg, {time: 3000, icon: 6});
                                    $('#dataTable').datagrid('reload');
                                }
                            },
                            error: function (jqXHR, textStatus, errorThrown) {
                                layer.msg("与远程服务器交互异常", {time: 3000, icon: 6});
                            }
                        });
                    }
                });
            } else {
                $.messager.alert("提示", "请选择要删除的行", "error");
            }
        }

        function submitForm() {
            if ($('#editForm').form('enableValidation').form('validate')) {
                var formval = JsonCode(editForm);
                formval = JSON.parse(formval);
                var actionUrl = "${path}/cootasktable/saveTable";
                $.ajax({
                    type: "POST",
                    url: actionUrl,
                    data: JSON.stringify(formval),
                    dataType: 'json',
                    contentType: "application/json;charset=utf-8",
                    success: function (text) {
                        if (text.status == 1) {
                            $('#editForm').form('clear');
                            $('#editWin').window('close');
                            layer.msg(text.msg, {time: 3000, icon: 6});
                            $('#dataTable').datagrid('reload');
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        layer.msg("与远程服务器交互异常", {time: 3000, icon: 6});
                    }
                });
            }
        }
    </script>
</head>
<body>
<table id="dataTable" title="扩展字段配置" class="easyui-datagrid" style="width:850px;height:450px"
       singleSelect="true" iconCls="icon-save">
</table>

<div id="editWin" class="easyui-window" title="编辑" style="width:500px;height:300px;padding:10px;"
     data-options="iconCls:'icon-save',modal:true,closed:true">
    <form id="editForm" name="editForm" method="post">
        <input type="hidden" name="id"/>
        <input type="hidden" name="fTaskHeadid" id="fTaskHeadid"/>
        <table cellpadding="5">
            <tr>
                <td>列名:</td>
                <td><input class="easyui-textbox" type="text" name="name" style="width:150px"
                           data-options="required:true"/></td>
            </tr>
            <tr>
                <td>类型:</td>
                <td>
                    <input class="easyui-combobox" id="type" name="type" style="width:150px;" data-options="
                            url:'${path}/common/getBaseCodeList?type=coo_task_column_type',
                            valueField: 'code',
                            textField: 'name',
                            required:true
                            ">
                </td>
            </tr>
            <tr>
                <td>排序:</td>
                <td><input class="easyui-numberbox" type="text" name="sort" style="width:150px"
                           data-options="required:true,prompt:'只允许填写数字...'" value="0"/></td>
            </tr>
            <tr>
                <td>备注:</td>
                <td><input class="easyui-textbox" name="note" data-options="multiline:true"
                           style="height:80px;width:300px"/></td>
            </tr>
        </table>
        <div style="text-align:right;margin-top:10px;padding-right:30px">
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'" style="width:15%"
               onclick="submitForm()">保存</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-clear'" style="width:15%"
               onclick="javascript:$('#editWin').window('close')">关闭</a>
        </div>
    </form>
</div>
</body>
</html>
